<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="/web/js/global/global_header.js"></script>
    <title>华锐Pms</title>
</head>
<style>
    .el-cascader-panel .el-radio {
        width: 100%;
        height: 100%;
        z-index: 10;
        position: absolute;
        top: 10px;
        right: -10px;
    }

    .el-cascader-panel .el-radio__input {
        visibility: hidden;
    }

    .el-cascader-panel .el-cascader-node__postfix {
        top: 10px;
    }
</style>

<body>
    <div id="app" class="" v-cloak>
        <el-dialog title="权限修改" :visible.sync="dialogFormVisible" width="30%" @closed="CL()">
            <el-form :model="form" label-width="100px" size="small" :rules="rules" ref="ruleForm">
                <el-row :gutter="20">
                    <el-form-item label="上级菜单">
                        <el-cascader :options="permissions" @change="cascaderChange" ref="cascader"
                            :props="{value:'id',label:'name',checkStrictly:true,expandTrigger: 'hover'}"
                            v-model="form.pid">
                        </el-cascader>
                    </el-form-item>

                    <el-form-item label="权限名称" prop="name" v-if="form.flag == 0 || form.flag == 1">
                        <el-input v-model="form.name" autocomplete="off" placeholder="如：查看房态"></el-input>
                    </el-form-item>
                    <el-form-item label="栏目名称" prop="name" v-if="form.flag == 2">
                        <el-input v-model="form.name" autocomplete="off" placeholder="如：菜单管理"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <template slot="label">
                            <el-tooltip class="item" effect="dark" content="只有最后一级类别才需要填写权限代码" placement="top">
                                <i class="el-icon-warning"></i>
                            </el-tooltip>
                            权限代码
                        </template>
                        <el-input v-model="form.code" autocomplete="off" placeholder="如：sys:user:add"></el-input>
                    </el-form-item>

                    <el-form-item label="栏目级别" v-if="form.flag == 0 || form.flag == 1">
                        <el-select v-model="form.flag" placeholder="请选择门店" size="small" style="width: 100%;">
                            <el-option label="超级管理员功能" :value="0"></el-option>
                            <el-option label="通用功能" :value="1"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item v-if="form.flag == 2">
                        <template slot="label">
                            <el-tooltip class="item" effect="dark" content="菜单图标只有二级菜单生效" placement="top">
                                <i class="el-icon-warning"></i>
                            </el-tooltip>
                            菜单图标
                        </template>
                        <el-input v-model="form.icon" autocomplete="off" placeholder="如：el-icon-s-marketing"></el-input>
                    </el-form-item>
                    <el-form-item label="网页地址" v-if="form.flag == 2">
                        <el-input v-model="form.url" autocomplete="off" placeholder="如：www.baidu.com"></el-input>
                    </el-form-item>
                    <el-form-item label="排序">
                        <el-input v-model="form.ord" autocomplete="off" placeholder="如：0"></el-input>
                    </el-form-item>
                </el-row>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false" size="small" class="tx-14">取 消</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')" size="small" class="tx-14">提交</el-button>
            </div>
        </el-dialog>
    </div>
    <script type="text/babel">
        new Vue({
            el: '#app',
            data: {
                dialogFormVisible: false,
                form: {
                    id: Pms.getParameter("id"),
                    name: "",
                    pid: Number(Pms.getParameter("pid")) == 0 ? Pms.getParameter("pid").toString() : Number(Pms.getParameter("pid")),
                    code: "",
                    url: "",
                    ord: "",
                    flag: Number(Pms.getParameter("flag")),
                    status: 1
                },
                permissions: [],
                rules: {
                    name: [
                        { required: true, message: '请填写权限名称', trigger: 'blur' },
                    ]
                },
                options: []
            },
            mounted() {
                this.dialogFormVisible = true
            },
            created() {
                this.getPermissionsList();
            },
            methods: {
                // 获取权限
                getPermissionsList: async function () {
                    let permissionsRes = await this.GET({ url: top.Config.curUrl + "/sys/sysFunction/list" })
                    this.permissions = permissionsRes.result.sysFunctionList;
                    if (this.form.id) { this.permissions = this.permissions.filter(item => item.id != this.form.id); }
                    this.permissions = WebUtil.handleLevel(this.permissions.filter(item => item.flag == this.form.flag), "id", "pid", 1);
                    this.permissions = this.recursion(this.permissions)
                    this.permissions.unshift({ "id": "0", "name": "顶级类目", })
                    // 获取单个权限数据
                    if (this.form.id) {
                        this.GET({ url: top.Config.curUrl + "/sys/sysFunction/get", map: this.form }).then((res) => {
                            if (res.retcode == 200) { //如果返回码不是200则提示错误登录信息
                                this.form = res.result.bean;
                                if (this.form.pid == 0) { this.form.pid.toString() }
                            } else { //如果返回码是200则登录成功
                                this.msgError(res.retmsg)
                            }
                        })
                    }
                },
                recursion(scroe) {
                    let that = this;
                    let fn = function (scroe) {
                        for (let i = 0; i < scroe.length; i++) {
                            const element = scroe[i];
                            if (element.children.length > 0) {
                                fn(element.children)
                            }
                            if (element.children.length == 0) {
                                that.$delete(element, "children");
                            }
                        }
                    }
                    fn(scroe);
                    return scroe
                },
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            this.startLoading("加载中", { background: "rgba(0, 0, 0, 0)", target: document.getElementsByClassName("el-dialog")[0] }, this)
                            this.POST({ url: top.Config.curUrl + "/sys/sysFunction/save", map: this.form }).then((res) => {
                                if (res.retcode == 200) { //如果返回码不是200则提示错误登录信息
                                    setTimeout(() => {
                                        this.Refresh("vm.getList()");
                                        this.closeLoading();
                                        this.dialogFormVisible = false;
                                    }, 1000);
                                } else { //如果返回码是200则登录成功
                                    this.msgError(res.retmsg);
                                    this.closeLoading();

                                }
                            })
                        }
                    });
                },
                cascaderChange(d) {
                    this.form.pid = d[d.length - 1];
                    this.$refs.cascader.dropDownVisible = false;
                }
            }
        })
    </script>

</body>

</html>